<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <cpn :number1="num1" :number2="num2" @num1-change="num1change" @num2-change="num2change"></cpn>
    </div>
    <template id="cpnC">
        <div>
            <h2>props: {{number1}}</h2>
            <h2>componets data: {{dNumber1}}</h2>
            <!-- <input type="text" :value="dNumber1" v-model="dNumber1"> -->
            <input type="text" v-model="dNumber1">
            <h2>props: {{number2}}</h2>
            <h2>component's data: {{dNumber2}}</h2>
            <input type="text" v-model="dNumber2">
        </div>
    </template>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                num1: 1,
                num2: 0
            },
            methods: {
                num1change: function(num){
                    this.num1 = parseFloat(num);
                },
                num2change: function(num){
                    this.num2 = parseFloat(num);
                }
            },
            components: {
                cpn: {
                    template: "#cpnC",
                    props: {
                        number1: {
                            type: Number,
                        },
                        number2: {
                            type: Number
                        }
                    },
                    data: function(){
                        return {
                            dNumber1: this.number1,
                            dNumber2: this.number2
                        }
                    },
                    watch: {
                        dNumber1(newValue) {
                            this.dNumber2 = newValue * 100;
                            this.$emit('num1-change', newValue);
                        },
                        dNumber2(newValue) {
                            this.dNumber1 = newValue / 100;
                            this.$emit('num2-change', newValue);
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>